<template>
  <div>
    <h1>角色管理</h1>
    <el-table 
      :row-key="(row: any) => row.role_code"
      :default-sort="{ prop: 'role_name', order: 'ascending' }"
      :data="roleStore.roles" stripe>
      <el-table-column prop="roleName" label="角色名称" sortable ></el-table-column>
      <el-table-column prop="roleCode" label="角色编码" sortable ></el-table-column>
      <el-table-column prop="description" label="描述" sortable ></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="editRole(scope.$index)">编辑</el-button>
          <el-button @click="deleteRole(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="roleStore.currentPage"
      :page-size="roleStore.pageSize"
      :total="roleStore.total"
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next"
    />
    <el-dialog  v-model="editRoleModal" title="编辑角色">
        <el-form :model="roleForm" :rules="rules" ref="roleFormRef" label-width="100px">
          <el-form-item label="角色编码" prop="roleCode">
            <el-input v-model="roleForm.roleCode" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="roleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="roleForm.description" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      <template #footer>
        <el-button @click="editRoleModal = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, reactive } from 'vue';
import { useRoleStore } from '../stores/roleStore';
import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElPagination } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'

const roleStore = useRoleStore();
const editRoleModal = ref(false);
const currentEditIndex = ref(-1); // 记录当前编辑条目的索引

const roleForm = ref({
  roleCode: '',
  roleName: '',
  description: ''
});

const rules = reactive<FormRules<typeof roleForm>>({
  roleCode: [
    { required: true, message: '请输入角色编码', trigger: 'blur' }
  ],
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入描述', trigger: 'blur' }
  ]
});

const roleFormRef = ref<FormInstance>();

const editRole = (index: number) => {
  currentEditIndex.value = index;
  editRoleModal.value = true;
  // 将选中条目的信息回显到对话框中
  roleForm.value = { ...roleStore.roles[index] };
};

const submitEditForm = async () => {
  await nextTick();
  roleFormRef.value?.validate(async (valid) => {
    if (valid) {
      // 更新角色信息
      await roleStore.updateRole(currentEditIndex.value, roleForm.value);
      editRoleModal.value = false;
      roleForm.value = {
        roleCode: '',
        roleName: '',
        description: ''
      };
    }
  });
};

const deleteRole = (index: number) => {
  roleStore.deleteRole(index);
};

const handleCurrentChange = (page: number) => {
  roleStore.changePage(page);
};

onMounted(() => {
  roleStore.fetchRoles();
});
</script>

<style scoped>
/* 可根据需要添加一些样式 */
</style>